From 17b679c86670d22229b851fc2ce3def6e0b6dea0 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Thu, 10 Jul 2014 11:55:51 +0200 Subject: [PATCH] Adwaita: simplify buttons drawing function --- gtk/resources/theme/Adwaita/_drawing.scss | 60 +++++++------------ .../theme/Adwaita/gtk-contained-dark.css | 32 +++++----- gtk/resources/theme/Adwaita/gtk-contained.css | 32 +++++----- 3 files changed, 53 insertions(+), 71 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss index fb327ac363..99cbbfdf73 100644 --- a/gtk/resources/theme/Adwaita/_drawing.scss +++ b/gtk/resources/theme/Adwaita/_drawing.scss @@ -151,10 +151,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on @else { border-color: $borders_color; } @include _button_text_shadow($tc,$c); - @if $noedge { box-shadow: inset 0 1px $_top_hilight; } - @else { - @include _shadows(inset 0 1px $_top_hilight, $widget_edge); - } + $_outsets: if($noedge, none, $widget_edge); + @include _shadows(inset 0 1px $_top_hilight, $_outsets); } @else if $t==hover { @@ -170,10 +168,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on $c); @include _button_text_shadow($tc,lighten($c,4%)); - @if $noedge { box-shadow: inset 0 1px $_top_hilight; } - @else { - @include _shadows(inset 0 1px $_top_hilight, $widget_edge); - } + $_outsets: if($noedge, none, $widget_edge); + @include _shadows(inset 0 1px $_top_hilight, $_outsets); } @else if $t==active { @@ -195,13 +191,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on darken($c,5%) 3%); } @include _button_text_shadow($tc,darken($c,10%)); - @if $noedge { - box-shadow: inset 0 2px 3px -1px transparentize(black,0.7); - } - @else { - @include _shadows(inset 0 2px 3px -1px transparentize(black,0.7), - $widget_edge); - } + $_outsets: if($noedge, none, $widget_edge); + @include _shadows(inset 0 2px 3px -1px transparentize(black,0.7),$_outsets); } @else if $t==insensitive { // @@ -212,15 +203,10 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on background-image: linear-gradient(to bottom, $insensitive_bg_color); text-shadow: none; icon-shadow: none; - @if $noedge { - // white with 0 alpha to avoid an ugly transition, since no color means - // black with 0 alpha - box-shadow: inset 0 1px transparentize(white,1); - } - @else { - @include _shadows(inset 0 1px transparentize(white,1), - $widget_edge); - } + $_outsets: if($noedge, none, $widget_edge); + // white with 0 alpha to avoid an ugly transition, since no color means + // black with 0 alpha + @include _shadows(inset 0 1px transparentize(white,1), $_outsets); } @else if $t==insensitive-active { // @@ -231,15 +217,10 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on background-image: linear-gradient(to bottom, mix($insensitive_borders_color, $insensitive_bg_color, 10%)); - @if $noedge { - // white with 0 alpha to avoid an ugly transition, since no color means - // black with 0 alpha - box-shadow: inset 0 1px transparentize(white,1); - } - @else { - @include _shadows(inset 0 1px transparentize(white,1), - $widget_edge); - } + $_outsets: if($noedge, none, $widget_edge); + // white with 0 alpha to avoid an ugly transition, since no color means + // black with 0 alpha + @include _shadows(inset 0 1px transparentize(white,1), $_outsets); } @else if $t==backdrop { @@ -253,7 +234,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on text-shadow: none; icon-shadow: none; @include _shadows(inset 0 1px transparentize(white,1), - 0 1px transparentize(white,1)); + 0 1px transparentize(white,1)); } @else if $t==backdrop-active { @@ -264,8 +245,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on border-color: $backdrop_borders_color; background-image: linear-gradient(to bottom, mix($backdrop_borders_color,$backdrop_bg_color, 35%)); - @include _shadows(inset 0 1px transparentize(white,1), - 0 1px transparentize(white,1)); + box-shadow: inset 0 1px transparentize(white,1), + 0 1px transparentize(white,1); } @else if $t==backdrop-insensitive { @@ -275,7 +256,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on color: $backdrop_insensitive_color; border-color: $backdrop_borders_color; background-image: linear-gradient(to bottom, $backdrop_bg_color); - box-shadow: inset 0 1px transparentize(white,1); + box-shadow: inset 0 1px transparentize(white,1), + 0 1px transparentize(white,1); } @else if $t==backdrop-insensitive-active { @@ -286,8 +268,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on border-color: $backdrop_borders_color; background-image: linear-gradient(to bottom, mix($backdrop_borders_color,$backdrop_bg_color, 8%)); - @include _shadows(inset 0 1px transparentize(white,1), - 0 1px transparentize(white,1)); + box-shadow: inset 0 1px transparentize(white,1), + 0 1px transparentize(white,1); } @else if $t==osd { diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index 173c5c44f4..65bd59e1f7 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -108,14 +108,14 @@ border: 1px solid #215d9c; background-color: rgba(33, 93, 156, 0.2); } +.overshoot { + background-color: rgba(33, 93, 156, 0.2); } + .dim-label, .titlebar .subtitle, .header-bar .subtitle { opacity: 0.55; text-shadow: none; } -.overshoot { - background-color: rgba(33, 93, 156, 0.2); } - /********************* * Spinner Animation * *********************/ @@ -299,7 +299,7 @@ color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active { border-style: solid; color: #454c4c; @@ -411,7 +411,7 @@ color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button.suggested-action:insensitive { border-style: solid; color: #939695; @@ -458,7 +458,7 @@ color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button.destructive-action:insensitive { border-style: solid; color: #939695; @@ -535,7 +535,7 @@ color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .inline-toolbar GtkToolButton > .button:backdrop:insensitive:active { border-style: solid; color: #454c4c; @@ -750,7 +750,7 @@ GtkColorButton.button { color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .spinbutton.vertical.entry { border-radius: 0; } .spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, .spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, .spinbutton.vertical .button:first-child:backdrop { @@ -932,7 +932,7 @@ GtkComboBox { color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .titlebar.selection-mode .button.suggested-action, .header-bar.selection-mode .button.suggested-action { border-style: solid; @@ -990,7 +990,7 @@ GtkComboBox { color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); border-color: #0f2b48; } .titlebar.selection-mode .selection-menu, .titlebar.selection-mode .selection-menu:backdrop, .header-bar.selection-mode .selection-menu, @@ -1548,7 +1548,7 @@ GtkSwitch { color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); border-color: #454c4c; } /************************* @@ -1937,7 +1937,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); border-color: #454c4c; } .scale.slider:active, .scale.scale-has-marks-above.scale-has-marks-below.slider:active, @@ -2505,7 +2505,7 @@ GtkCalendar { color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .message-dialog.csd .dialog-action-area .button.suggested-action { border-style: solid; border-width: 1px; @@ -2544,7 +2544,7 @@ GtkCalendar { color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .message-dialog.csd .dialog-action-area .button.suggested-action:insensitive { border-style: solid; color: #939695; @@ -2591,7 +2591,7 @@ GtkCalendar { color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .message-dialog.csd .dialog-action-area .button.destructive-action:insensitive { border-style: solid; color: #939695; @@ -2733,7 +2733,7 @@ GtkInfoBar { color: #454c4c; border-color: #1e2222; background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } /************ * Tooltips * diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index bf25d7f28e..e3f67c55dc 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -108,14 +108,14 @@ border: 1px solid #4a90d9; background-color: rgba(74, 144, 217, 0.2); } +.overshoot { + background-color: rgba(74, 144, 217, 0.2); } + .dim-label, .titlebar .subtitle, .header-bar .subtitle { opacity: 0.55; text-shadow: none; } -.overshoot { - background-color: rgba(74, 144, 217, 0.2); } - /********************* * Spinner Animation * *********************/ @@ -291,7 +291,7 @@ color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active { border-style: solid; color: #c7c7c7; @@ -403,7 +403,7 @@ color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button.suggested-action:insensitive { border-style: solid; color: #8d9091; @@ -450,7 +450,7 @@ color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button.destructive-action:insensitive { border-style: solid; color: #8d9091; @@ -527,7 +527,7 @@ color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .inline-toolbar GtkToolButton > .button:backdrop:insensitive:active { border-style: solid; color: #c7c7c7; @@ -742,7 +742,7 @@ GtkColorButton.button { color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .spinbutton.vertical.entry { border-radius: 0; } .spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, .spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, .spinbutton.vertical .button:first-child:backdrop { @@ -924,7 +924,7 @@ GtkComboBox { color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .titlebar.selection-mode .button.suggested-action, .header-bar.selection-mode .button.suggested-action { border-style: solid; @@ -982,7 +982,7 @@ GtkComboBox { color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); border-color: #184472; } .titlebar.selection-mode .selection-menu, .titlebar.selection-mode .selection-menu:backdrop, .header-bar.selection-mode .selection-menu, @@ -1541,7 +1541,7 @@ GtkSwitch { color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } /************************* * Check and Radio items * @@ -1929,7 +1929,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .scale.slider:active, .scale.scale-has-marks-above.scale-has-marks-below.slider:active, .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active { @@ -2497,7 +2497,7 @@ GtkCalendar { color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .message-dialog.csd .dialog-action-area .button.suggested-action { border-style: solid; border-width: 1px; @@ -2536,7 +2536,7 @@ GtkCalendar { color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .message-dialog.csd .dialog-action-area .button.suggested-action:insensitive { border-style: solid; color: #8d9091; @@ -2583,7 +2583,7 @@ GtkCalendar { color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .message-dialog.csd .dialog-action-area .button.destructive-action:insensitive { border-style: solid; color: #8d9091; @@ -2725,7 +2725,7 @@ GtkInfoBar { color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #ededed); - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } /************ * Tooltips * -- 2.30.2